<template>
	<view class="container">
        <div class="banner" :style="{backgroundImage: `url(${data.avatar})`}">
            <div class="nums-box">报名人数：{{data.registrationNums}}/{{data.nums}}人报名</div>
        </div>
        <div class="info">
            <div class="title">
                <div class="icon"></div>
                <div>活动简介</div>
            </div>
		    <u-parse class="content" :html="data.expert"></u-parse>
        </div>
        <div v-if="classType == 2" class="intro-course" @click="visiable = true">
            <div class="title">
                <div class="icon"></div>
                <div>课程选择<span style="font-size: 26rpx;margin-left: 20rpx" v-if="list.length">(共{{list.length}}种课程分类可选)</span></div>
            </div>
        </div>
        <div v-if="data.attention || data.details" class="intro-tip">
            <div class="title">
                <div class="icon"></div>
                <div>注意事项</div>
            </div>
		    <u-parse v-if="data.attention" class="content" :html="data.attention"></u-parse>
		    <u-parse v-if="data.details" class="content" :html="data.details"></u-parse>
        </div>

		<u-popup class="course-wrapper" v-model="visiable" mode="bottom" length="80%">
            <div class="course-title">课程选择<span style="font-size: 26rpx;margin-left: 20rpx" v-if="list.length">(共{{list.length}}种课程分类可选)</span></div>
            <div class="course-list">
                <u-checkbox-group :wrap="true" shape="circle">
                    <u-checkbox @change="checkAll" active-color="#59C4CA" v-model="hasAll">全选</u-checkbox>
		        	<u-checkbox 
		        		@change="checkboxChange" 
                        v-for="(item, index) in list"
                        :key="index"
		        		v-model="item.checked" 
		        		:name="item.classTime"
                        active-color="#59C4CA"
		        	>{{item.name}} {{item.classTime}}</u-checkbox>
		        </u-checkbox-group>          
            </div>
            <div class="course-confirm" @click="visiable = false">完成</div>
		</u-popup>

        <div class="footer">
            <div v-if="classType == 2" class="course-nums">共{{courseNums}}节课</div>
            <div class="fee-label">合计：</div>
            <div class="fee">￥{{totalFee}}</div>
            <div class="btn-join" :class="{done: (isRegistration === 2) || !canClick}" @click="createPay">立即报名</div>
        </div>

        <u-toast ref="uToast" />
	</view>
</template>

<script>
import Vue from 'vue';

import { createPayAPI } from '../../api/pay'
import { 
	getCourseInfoAPI,
} from '../../api/entertainment'
import { getAddressListAPI } from '../../api/address'

const app = getApp()
export default Vue.extend({
	data() {
		return {
            data: {},
            id: '',
            name: '',
            visiable: false,
            hasAll: true,
            addressId: '',
            isRegistration: 2, // 1可购买 2不可购买
            canClick: true,
            classType: 1, // 1单次课 2系列课
            list: [
                // {
                //     name: '课程',
                //     classTime: '18:00',
                //     classId: 1,
                //     classPrice: 50,
                //     checked: false
                // },
                // {
                //     name: '课程',
                //     classTime: '18:00',
                //     classId: 2,
                //     classPrice: 50,
                //     checked: false
                // },
                // {
                //     name: '课程',
                //     classTime: '18:00',
                //     classId: 3,
                //     classPrice: 50,
                //     checked: false
                // }
            ],
		}
	},
    computed: {
        courseNums(){
            let totalFee = 0
            this.list.forEach(item => {
                if(item.checked) {
                    totalFee++
                }
            })
            return totalFee
        },
        totalFee(){
            if(this.list.length) {
                let totalFee = 0
                this.list.forEach(item => {
                    if(item.checked) {
                        totalFee += item.classPrice/1
                    }
                })
                return totalFee
            } else {
                return this.data.totalFee || 0
            }
        }
    },
	onLoad(options) {
        let { id } = options
        this.id = id
	},
    onShow(){
        this.canClick = true
        getCourseInfoAPI({classInfoId: this.id}).then(res => {
            this.data = res.classInfoVo
            this.classType = this.data.classType
            this.isRegistration = this.data.isRegistration
            if(this.data.classInfoDetailList) {
                this.list = this.data.classInfoDetailList.map(item => {
                    return Vue.observable({...item, checked: true}) // 劫持checked属性
                })
            } else {
                this.list = []
            }
            console.log(this.list)
            console.log('详情', res)
        })
        this.getAddressList()
    },
    methods: {
        // 查询默认地址
        getAddressList(){
            getAddressListAPI({
                sessionId: app.globalData.sessionId
            }).then(res => {
                let address = res.userAddressList.find(item => item.isDefault == '1')
                if(address){
                    this.addressId = address.id
                }
            }).catch(err => {
                this.$refs.uToast.show({
		    	    title: err,
		    	    type: 'error',
                })
            })
        },
        checkAll(){
            if(this.hasAll){
                this.list.forEach(item => {item.checked = false})
            } else {
                this.list.forEach(item => {item.checked = true})
            }
        },
        checkboxChange(e){
            this.$nextTick(()=>{
                let flag = true;
                this.list.forEach(item => {
                    if(!item.checked){
                        flag = false
                    }
                })
                this.hasAll = flag
            })
        },
        createPay(){
            if(this.isRegistration === 2){
                this.$refs.uToast.show({
		    	    title: '预约人数已满',
		    	    type: 'info',
                })
                return false
            }
            if(!this.canClick){
                return false
            }
            this.canClick = false
            createPayAPI({
                payType: 'open',
                bizType: 2, // 1护工 2文娱
                price: Math.floor(this.totalFee*100), 
                // price: this.totalFee*1 === 0 ? 0 : 1, 
                amount: 1,
                payMethod: '03',
                bizCode: this.id,
                bizName: this.data.name,
                addressId: this.addressId,
                openId: app.globalData.openId,
                sessionId: app.globalData.sessionId,
                bizInfo: JSON.stringify({
                    startTime: this.data.startTime,
                    address: this.data.address,
                    courseList: this.list.filter(item => item.checked)
                })
            }).then(res => {
                // 正常支付
                if(this.totalFee*1 !== 0){
                    console.log(this.totalFee)
                    wx.requestPayment({
                        timeStamp: res.timeStamp,
                        nonceStr: res.nonceStr,
                        package: 'prepay_id='+res.prepayId,
                        signType: 'MD5',
                        paySign: res.signStr,
                        success:() => {
                            this.$refs.uToast.show({
				                title: '支付成功',
				                type: 'success',
                                callback: () => {
           	                        this.$u.route('pages/orderList/orderList')
                                }
                            })
                        }
                    })
                } 
                // 0元支付
                else {
                    console.log('0元支付')
                    this.$refs.uToast.show({
			            title: '预约成功',
			            type: 'success',
                        callback: () => {
           	                this.$u.route('pages/orderList/orderList')
                        }
                    })
                }
            }).catch(err => {
                this.$refs.uToast.show({
		    	    title: err,
		    	    type: 'error',
                })
                this.canClick = true
            })
        }
    }
});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    min-height: 100vh;
    background-color: #efefef;
    padding-bottom: 120rpx;
    .info{
        background-color: #fff;
        margin-bottom: 15rpx;
    }
    .intro-course{
        background-color: #fff;
        margin-bottom: 15rpx;
    }
    .intro-tip{
        background-color: #fff;
        margin-bottom: 15rpx;
    }
    .title{
        font-size: 36rpx;
        padding: 20rpx 40rpx;
        color: #534F4F;
        display: flex;
        align-items: center;
        .icon{
            width: 20rpx;
            height: 20rpx;
            margin-right: 10rpx;
            background-image: url('https://bizser.njtrh.com:9954/images/biztd/20211209/20211209010642889.jpg');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
}
.content{
    padding: 25rpx 0;
    margin: 0 40rpx;
    border-top: 1rpx solid #efefef;
}

.banner{
    position: relative;
    height: 200px;
    background-size: cover;
    .nums-box{
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: rgba(83, 79, 79, 0.5);
        color: #fff;
        font-size: 36rpx;
        line-height: 88rpx;
        padding-left: 30rpx;
    }
}

.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .course-nums{
        margin-right: 20rpx;
    }
    .fee{
        font-size: 36rpx;
        margin-right: 20rpx;
        color: #FB7133;
    }
    .btn-join{
        display: inline-block;
        color: #fff;
        background-color: $theme-color;
        font-size: 18px;
        line-height: 40px;
        padding: 0 20px;
        margin-right: 20px;
        border-radius: 20px;
        &.done{
            background-color: #ccc;
        }
    }
}
.modal-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 40rpx;
    .modal-title{
        width: 100%;
        text-align: center;
        flex: none;
        font-size: 32rpx;
        line-height: 1;
        color: #534F4F;
        padding: 30rpx 0;
    }
    .modal-content{
        flex: auto;
        font-size: 26rpx;
        color: #707070;
        padding: 20rpx 10rpx;
        overflow: auto;
        margin-bottom: 20rpx;
        .text{
            line-height: 48rpx;
        }
    }
    .modal-confirm{
        flex: none;
        font-size: 12px;
        margin-bottom: 20rpx;
    }
    .btn-confirm{
        flex: none;
        width: 180rpx;
        text-align: center;
        font-size: 36rpx;
        line-height: 70rpx;
        color: #fff;
        background-color: #ccc;
        border-radius: 10rpx;
        margin-bottom: 50rpx;
        transition-duration: 0.2s;
        &.active{
            background-color: $theme-color;
        }
    }
}
.course-wrapper{
    position: relative;
    .course-title{
        font-size: 36rpx;
        line-height: 1;
        padding: 30rpx;
    }
    .course-list{
        padding: 0 30rpx;
    }
    .course-confirm{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
        width: 50vw;
        font-size: 32rpx;
        line-height: 80rpx;
        text-align: center;
        color: #fff;
        border-radius: 40rpx;
        background-color: $theme-color;
    }
}
</style>
